<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>参考链接：https://juejin.cn/post/7016521320183644173</title>
	</head>
	<style type="text/css">
		html,
		body {
			width: 100%;
			height: 100%;
			display: flex;
			background: linear-gradient(#1a0f19, #16121c);
			overflow: hidden;
		}

		svg {
			position: absolute;
			width: 600px;
			height: 600px;
		}

		.container {
			position: relative;
			width: 400px;
			height: 400px;
			margin: auto;
		}


		.line {
			--colorA: #f24983;
			fill: none;
			stroke-width: 10;
			stroke-linejoin: round;
			stroke-linecap: round;
			stroke: #fff;
			stroke-dasharray: 328 600;
			animation: rotate 2s infinite linear;
			filter:
				drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA)) drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 15px var(--colorA)) drop-shadow(0 0 25px var(--colorA));
		}

		.line2 {
			animation: rotate 2s infinite -1s linear;
			--colorA: #37c1ff;
		}


		@keyframes rotate {
			0% {
				stroke-dashoffset: 0;
			}

			100% {
				stroke-dashoffset: 928;
			}
		}
	</style>
	<body>
		<div class="container">
			<svg>
				<path class="line"
					d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
			</svg>
			<svg>
				<path class="line line2"
					d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
			</svg>
		</div>
	</body>
</html>
